<template>
  <div>
    <el-row style="margin-top: -20px; margin-bottom: 10px">
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark">
          <div class="title">
            <h1>物流新起点 服务更便捷</h1>
            <p>为企业提供更优质的物流运输服务</p>
            <!-- <span class="btn-start">立即开始物流之旅</span> -->
            <el-button
              icon="el-icon-position"
              type="primary"
              style="width: 50%; height: 50px; margin-top: 30px"
              ><i>立即开始物流之旅</i></el-button
            >
          </div>
        </div></el-col
      >
    </el-row>

    <el-row style="margin-top: 20px">
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark">
          <div class="slide02">
            <div class="slide-title">
              <img src="../../../public/images/title_01.png" alt="" />
            </div>
            <div class="slide-content">
              <ul>
                <li>
                  <img src="../../../public/images/c1.png" alt="" />
                  <p>云车库</p>
                  <span>海量认识车辆,让您找车更轻松</span>
                </li>
                <li>
                  <img src="../../../public/images/c2.png" alt="" />
                  <p>货场</p>
                  <span>每天发布真实货源,让等货一去不复返</span>
                </li>
                <li>
                  <img src="../../../public/images/c3.png" alt="" />
                  <p>APP</p>
                  <span>司机端app,让使用更简单</span>
                </li>
                <li>
                  <img src="../../../public/images/c4.png" alt="" />
                  <p>小程序</p>
                  <span>沟通与工作完美结合</span>
                </li>
              </ul>
            </div>
          </div>
        </div></el-col
      >
    </el-row>

    <el-row style="margin:20px 0">
      <div class="bottomImg" style="text-align: center; margin: 30px 0">
        <img src="../../../public/images/bottom.png" alt="" />
      </div>
      <el-col :span="12"
        ><div style="margin-right:20px" class="grid-content bg-purple">
          <el-card >
            <div class="bLeft" style="margin:0 auto">
              <div class="pic">
                <img src="../../../public/images/avator1.png" alt="">
              </div>
              <p class="name">陈映</p>
                <p class="info">2020-05-14</p>
                <p class="text">
                  你们软件很好用，使用简单，很适合我们卡车司机，我会一直支持的，希望你们能为我们司机带来更多的福利
                </p>
            </div>
          </el-card>
        </div></el-col
      >
      <el-col :span="12"
        ><div class="grid-content bg-purple-light">
          <el-card >
            <div class="bLeft" style="margin:0 auto">
              <div class="pic">
                <img src="../../../public/images/avator2.png" alt="">
              </div>
              <p class="name">小叶</p>
                <p class="info">2020-04-26</p>
                <p class="text">
                  感谢平台为我们企业降低了不少成本，云车库也很好用，希望以后开发更多好用的产品
                </p>
            </div>
          </el-card>
          </div
      ></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Home",
};
</script>

<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
  background-image: url(../../../public/images/first.png);
  z-index: 1;
  height: 830px;
  // background: #eee;
  position: relative;
  .title {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 35%;
    transform: translate(-50%, -50%);
    z-index: 10;
    h1 {
      font-size: 75px;
      margin-bottom: 30px;
      font-weight: 500;
      color: #fff;
    }
    p {
      font-size: 26px;
      letter-spacing: 4px;
      margin-left: -6px;
      text-indent: 0;
      color: #fff;
    }
    i {
      font-size: 18px;
      border-radius: 5px;
      font-family: "Microsoft YaHei";
    }
  }
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.slide01 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100%;
  background-image: url(../../../public/images/first.png);
}

.slide02 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100%;
  background-image: url(../../../public/images/background.png);
  .slide-title {
    padding-top: 180px;
    text-align: center;
  }

  .slide-content {
    width: 1300px;
    height: 498px;
    margin: 0 auto;
    padding-top: 100px;
    ul {
      display: flex;
      li {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        &:hover {
          transform: translateY(-20px);
          transition: all 0.5s linear;
        }
        img {
          width: 220px;
          margin-bottom: 20px;
        }
        p {
          font-size: 18px;
          margin-bottom: 5px;
          color: #fff;
        }
        span {
          color: rgba(255, 255, 255, 0.5);
        }
      }
    }
  }
}

.bLeft {
  background: #f6f7f9;
  border-radius: 5px;
  padding: 30px;
  width: 500px;
  height: 320px;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  .pic {
    display: inline-block;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 16px;
  }
  .name{
    margin-bottom: 10px;
    font-size: 20px;
  }
  .info{
    color: #999;
    margin-bottom: 20px;
  }
  .text{
    white-space: pre-wrap;
    line-height: 30px;
    font-size: 16px;
  }
}
</style>
